import React, { Fragment } from "react"
import { FilterTag } from "./FilterTag"
import { Typography, Divider } from "antd"
const { Text } = Typography

interface PropsType {
	title: string
	tags: string[]
}

const Filter: React.FC<PropsType> = ({ title, tags }) => {
	return (
		<div>
			<Text style={{ marginRight: 40, fontSize: 15, fontWeight: 500 }}>{title} : </Text>
			{tags.map((t, index) => {
				if (index === tags.length - 1) return <FilterTag key={`filter${index}`}>{t}</FilterTag>
				return (
					<span key={`filter${index}`}>
						<FilterTag>{t}</FilterTag>
						<Divider type="vertical" />
					</span>
				)
			})}
		</div>
	)
}

export default Filter
